<template>
  <div>
    <!-- 正在热映 -->
    <!-- <ul>
      <li v-for="item in movieDatas" :key="item.filmId">
        <img :src="item.poster" alt="" @click="detail" />
        <div class="box" @click="detail">
          <div class="innerbox">{{ item.name }}</div>
          <div class="innerbox">
            <span>观众评分 </span><span class="grade">{{ item.grade }}</span>
          </div>
          <div class="innerbox">主演: {{ item.director }}</div>
          <div class="innerbox">
            <span>{{ item.nation }}</span> | <span>{{ item.runtime }}</span
            >分钟
          </div>
        </div>
        <div class="buy">购票</div>
      </li>
    </ul> -->

    <ul>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <li v-for="item in movieDatas" :key="item.filmId">
          <img :src="item.poster" alt="" @click="detail" />
          <div class="box" @click="detail">
            <div class="innerbox">{{ item.name }}</div>
            <div class="innerbox">
              <span>观众评分 </span><span class="grade">{{ item.grade }}</span>
            </div>
            <div class="innerbox qq">主演: {{ item.actorList }}</div>
            <div class="innerbox">
              <span>{{ item.nation }}</span> | <span>{{ item.runtime }}</span
              >分钟
            </div>
          </div>
          <div class="buy">购票</div>
        </li>
      </van-list>
    </ul>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getMovieList } from "../../API/movieList";

export default {
  setup() {
    // 上拉加载
    const movieDatas = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const params = {
      cityId: "110100",
      pageNum: 1,
      pageSize: "10",
      type: "1",
      k: "2771289",
    };

    async function onLoad() {
      console.log(123);
      // 正在热映请求
      await getLIst1();
      params.pageNum++;
      loading.value = false; // 请求完数据，加载动画关闭
      // 请求第二页数据
    }

    // 到详情页
    const router = useRouter();
    function detail() {
      router.push("/detail");
    }

    async function getLIst1() {
      const {
        data: {
          data: { films },
        },
      } = await getMovieList(params);
      films.forEach((item) => {
        item.actorList = item.actors.reduce((s, it) => s + " " + it.name, "");
      });

      movieDatas.value = [...movieDatas.value, ...films];
      console.log(films);
    }

    return {
      detail,
      movieDatas,
      getLIst1,
      loading,
      finished,
      onLoad,
    };
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
ul {
  margin-top: 44px;
  padding-bottom: 40px;
}
li {
  width: 100%;
  height: 134px;
  border-bottom: 1px solid rgb(229, 228, 228);

  padding: 15px;
  box-sizing: border-box;
}
img {
  width: 66px;
  height: 99px;
  float: left;
}
.box {
  width: 210px;
  height: 82px;
  float: left;
  margin-top: 2.333333vw;
  padding-left: 15px;
}
.box1 {
  width: 210px;
  height: 82px;
  float: left;
  margin-top: 3vw;
  padding-left: 15px;
  padding-top: 10px;
}
.box1 > .innerbox:nth-of-type(2),
.innerbox:nth-of-type(3) {
  font-size: 14px;
  color: grey;
}
.box .innerbox {
  width: 53vw;
  height: 22px;
  font-size: 18px;
}
.box1 .innerbox {
  width: 210px;
  height: 22px;
  font-size: 18px;
}
.box > .innerbox:nth-of-type(2),
.innerbox:nth-of-type(3),
.innerbox:nth-of-type(4) {
  font-size: 14px;
  color: grey;
}
.box > .innerbox:nth-of-type(3),
.innerbox:nth-of-type(4) {
  font-size: 12px;
  color: grey;
}
.buy,
.order {
  width: 50px;
  height: 25px;
  border: 1px solid orange;
  border-radius: 5px;
  float: left;
  margin-top: 9.333333vw;
  margin-left: 2.8vw;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  color: orange;
}
.grade {
  color: orange;
}
.van-tabs__line {
  background-color: orange !important;
}
.qq {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
